<!--
 * @Author: your name
 * @Date: 2020-12-03 19:38:10
 * @LastEditTime: 2020-12-08 16:56:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_shop\src\components\NewLogs.vue
-->
<template>
  <div class="NewLogs-main">
    <p class="icon-line">
    <span class="goBack" @click='goBack'><i class="el-icon-back"></i></span>
    <span class="preview-icon" @click='goPreview'><i :class="objPreview"></i></span>
    <span class="determine" @click='determine'><i class="el-icon-check"></i></span>
    </p>
    <el-input v-model="log.title" class="log-title" placeholder="请输入日志标题"></el-input>
    <div class="mark-main">
      <!-- <Markdown v-model="log.content" class="log-content" v-show="!ispreview"></Markdown> -->
      <el-input class="log-content" type="textarea" v-model="log.content" v-show="!ispreview" :rows=60
        :autosize="{ minRows: 24}" placeholder="在此编辑内容......"></el-input>
      <article class="preview markdown-body" v-html="log.html_content" v-show="ispreview"></article>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        log: {},
        ispreview: false,
        objPreview: {
          'el-icon-view': true,
          'el-icon-edit-outline': false
        },
      }
    },
    watch: {
      'log.content': function (oldText, newText) {
        this.log.html_content = this.$marked(this.log.content)
      }
    },
    methods: {
      goBack: function () {
        this.$router.back(-1)
      },
      goPreview: function () {
        this.ispreview = !this.ispreview
        this.objPreview['el-icon-view'] = !this.objPreview['el-icon-view']
        this.objPreview['el-icon-edit-outline'] = !this.objPreview['el-icon-edit-outline']
      },
      determine: async function () {
        console.log('正在发布...');
        const {
          data: res
        } = await this.$http.post('/logs', {
          title: this.log.title || '',
          content: this.log.content || '',
          html_content: this.log.html_content || ''
        })
        if (res.meta.success !== true) return this.$message.error('日志发布失败')
        this.$message.success(res.meta.message);
        this.$router.push('/logs/list')
      }
    }
  }

</script>

<style lang="less">
  .NewLogs-main {
   * {
      padding: 0;
      margin: 0;
    }

    //图片行
    .icon-line {
      margin: 10px 0;
      height: 40px;
      overflow: hidden;

      //后退按钮
      .goBack {
        float: left;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
      }

      .goBack:hover {
        color: goldenrod;
      }

      //预览按钮
      .preview-icon {
        float: right;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        font-weight: 900;
        cursor: pointer;
        color: rgb(54, 223, 54);
      }

      .preview-icon:hover {
        color: rgb(120, 194, 10);
      }

      //确定提交按钮
      .determine {
        float: right;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        font-weight: 900;
        cursor: pointer;
        color: rgb(0, 119, 0);
      }

      .determine:hover {
        color: rgb(120, 194, 10);
      }
    }

    //日志标题
    .log-title {
      margin: 10px 0;
    }

    //Markdown编辑与渲染区域
    .mark-main {
      display: flex;
      text-align: left;
      font-size: 16px;

      //编辑区域
      .log-content {
        box-sizing: border-box;
        width: 100%;
        min-height: 520px;

        .el-textarea__inner {
          box-sizing: border-box;
          width: 100%;
          min-height: 520px;
          padding: 10px;
          border: 0;
          border-radius: 5px;
          word-break: break-all;
          outline: none;
          user-select: text;
          white-space: pre-wrap;
          text-align: left;
          resize: none;
          overflow: hidden;
          background-color: rgba(241, 241, 241, .98);
          -webkit-user-modify: read-write-plaintext-only;
        }
      }
    }

    //渲染区域
    .preview {
      width: 100%;
      min-height: 500px;
      word-break: break-all;
      user-select: text;
      white-space: pre-wrap;
    }

    //GitHub-markdown-css
    .markdown-body {
      box-sizing: border-box;
      min-width: 200px;
      max-width: 980px;
      margin: 0 auto;
      padding: 45px;
    }

    @media (max-width: 767px) {
      .markdown-body {
        padding: 15px;
      }
    }
  }

</style>
